<template>
  <div class="city">
      <top-header :isLeft="true" title="搜索城市"></top-header>
      <div class="search">
          <a-input-search placeholder="搜索城市" v-model="city_val" />
      </div>
      <div class="location">
          <location :address="city"></location>
      </div>

      <alphabet @selectCity="selectCity" v-if="searchList.length==0" ref="allcity" :cityInfo="cityInfo" :keys="keys"></alphabet>
      
      <div class="serach_list" v-else>
        <ul>
          <li v-for="(item, index) in searchList" :key="index" @click="selectCity(item)">
            {{item.name}}
          </li>
        </ul>
      </div>
  </div>
</template>

<script>
import Alphabet from '../components/Alphabet.vue'
import Location from '../components/Location.vue'
import TopHeader from '../components/TopHeader.vue'
export default {
  components: { TopHeader, Location, Alphabet },
  data() {
      return {
          city_val:'',//搜索框的值
          cityInfo:{},//接口数据（所有城市）
          keys:[],//字母表
          allCities:[],//所有城市,
          searchList:[],//搜索到的城市
      }
  },
  watch:{
    city_val(){
      this.searchCity();
    }
  },
  computed:{
      city(){
          if(JSON.stringify(this.$store.getters.location) != "{}"){
              return this.$store.getters.location.addressComponent.city ||this.$store.getters.location.addressComponent.province;
          }
      },
  },
  methods: {
    getCityInfo(){
      this.$http.get('/api/getCities').then(
        res=>{
          this.cityInfo=res.data.data.cities;
          //处理key
          this.keys=Object.keys(res.data.data.cities);
          //去除hotcities这个key
          this.keys.pop();
          //排序
          this.keys.sort();

          //初始化better-scroll插件
          this.$nextTick(()=>{
            this.$refs.allcity.initBScroll();
          });

          //存储所有城市，用来搜索过滤
          this.keys.forEach(key => {
            this.cityInfo[key].forEach(city=>{
              this.allCities.push(city);
            })
          });
        },
        err=>{},
        );
    },
    //搜索城市逻辑
    searchCity(){
      if(this.city_val==''){
         this.searchList=[];
      }else{
         this.searchList=this.allCities.filter(item=>{
           return item.name.indexOf(this.city_val) !=-1;
         })
      }
    },

    selectCity(item){
       this.$http.get('/api/getStore',{
         params:{
           area_code:item.area_code,
         }
       }).then(
         res=>{
           this.$router.push({name:'StoreInfo',query:{
             store:res.data.data.stores,
           }})
         },
         err=>{

         }
        )
    }
  },
  created() {
    this.getCityInfo();
  },
}

</script>
<style lang="scss" scoped>
.city {
  width: 100%;
  height: 100%;
  .search,
  .location {
    width: 100%;
    background: $module-color;
    padding: $common-padding;
  }
  .search {
    padding-bottom: 0px;
  }
  .ant-input {
    padding-top: 0px $common-padding;
  }

  .search_list {
    background: $module-color;
    padding: 5px $common-padding;

    li {
      padding: 10px;
      border-bottom: 1px solid #eee;
    }
  }
}
</style>